<template>
  <div class="home">
    <el-card class="upload-card">
      <div slot="header">
        <h2>上传照片进行虚拟试衣</h2>
      </div>
      
      <el-form :model="form" label-width="120px" label-position="left">
        <el-form-item label="上传照片">
          <el-upload
            class="image-uploader"
            action="#"
            :show-file-list="false"
            :on-change="handleImageChange"
            :auto-upload="false"
            :before-upload="beforeUpload">
            <img v-if="imageUrl" :src="imageUrl" class="preview-image">
            <i v-else class="el-icon-plus upload-icon"></i>
          </el-upload>
          <div class="upload-tip">请上传清晰的全身照片</div>
        </el-form-item>
        
        <!-- 基本信息部分 -->
        <div class="form-section">
          <h3>基本信息</h3>
          <el-form-item label="性别">
            <el-radio-group v-model="form.gender">
              <el-radio label="男">男</el-radio>
              <el-radio label="女">女</el-radio>
            </el-radio-group>
          </el-form-item>
          
          <el-form-item label="年龄段">
            <el-select v-model="form.ageGroup" placeholder="请选择年龄段">
              <el-option label="18岁以下" value="under18"></el-option>
              <el-option label="18-25岁" value="18-25"></el-option>
              <el-option label="26-35岁" value="26-35"></el-option>
              <el-option label="36-45岁" value="36-45"></el-option>
              <el-option label="46岁以上" value="above46"></el-option>
            </el-select>
          </el-form-item>
          
          <el-form-item label="身高(cm)">
            <el-input-number v-model="form.height" :min="120" :max="220" :step="1"></el-input-number>
          </el-form-item>
          
          <el-form-item label="体型">
            <el-select v-model="form.bodyType" placeholder="请选择体型">
              <el-option label="偏瘦" value="slim"></el-option>
              <el-option label="标准" value="standard"></el-option>
              <el-option label="微胖" value="slightlyOverweight"></el-option>
              <el-option label="偏胖" value="plump"></el-option>
              <el-option label="健壮" value="muscular"></el-option>
            </el-select>
          </el-form-item>
          
          <el-form-item label="肤色">
            <el-select v-model="form.skinTone" placeholder="请选择肤色">
              <el-option label="白皙" value="fair"></el-option>
              <el-option label="自然色" value="natural"></el-option>
              <el-option label="小麦色" value="tan"></el-option>
              <el-option label="深色" value="dark"></el-option>
            </el-select>
          </el-form-item>
        </div>
        
        <!-- 穿搭需求部分 -->
        <div class="form-section">
          <h3>穿搭需求</h3>
          <el-form-item label="场合">
            <el-select v-model="form.occasion" placeholder="请选择场合">
              <el-option label="日常休闲" value="casual"></el-option>
              <el-option label="职场工作" value="work"></el-option>
              <el-option label="正式场合" value="formal"></el-option>
              <el-option label="约会" value="date"></el-option>
              <el-option label="派对聚会" value="party"></el-option>
              <el-option label="户外活动" value="outdoor"></el-option>
              <el-option label="运动健身" value="sport"></el-option>
            </el-select>
          </el-form-item>
          
          <el-form-item label="季节">
            <el-select v-model="form.season" placeholder="请选择季节">
              <el-option label="春季" value="spring"></el-option>
              <el-option label="夏季" value="summer"></el-option>
              <el-option label="秋季" value="autumn"></el-option>
              <el-option label="冬季" value="winter"></el-option>
            </el-select>
          </el-form-item>
          
          <el-form-item label="服装类型">
            <el-select v-model="form.clothingType" placeholder="请选择衣服类型" @change="updateClothingSubTypes">
              <el-option label="上衣" value="top"></el-option>
              <el-option label="外套" value="outerwear"></el-option>
              <el-option label="裤装" value="pants"></el-option>
              <el-option label="裙装" value="skirt"></el-option>
              <el-option label="连衣裙" value="dress"></el-option>
              <el-option label="套装" value="suit"></el-option>
            </el-select>
          </el-form-item>
          
          <el-form-item label="具体款式" v-if="form.clothingType">
            <el-select v-model="form.clothingSubType" placeholder="请选择具体款式">
              <el-option 
                v-for="option in clothingSubTypeOptions" 
                :key="option.value" 
                :label="option.label" 
                :value="option.value">
              </el-option>
            </el-select>
          </el-form-item>
          
          <el-form-item label="服装风格">
            <el-select v-model="form.style" placeholder="请选择风格">
              <el-option label="休闲" value="casual"></el-option>
              <el-option label="商务" value="business"></el-option>
              <el-option label="街头" value="streetwear"></el-option>
              <el-option label="复古" value="vintage"></el-option>
              <el-option label="优雅" value="elegant"></el-option>
              <el-option label="运动" value="sport"></el-option>
              <el-option label="民族" value="ethnic"></el-option>
              <el-option label="正式" value="formal"></el-option>
              <el-option label="简约" value="minimalist"></el-option>
            </el-select>
          </el-form-item>
        </div>
        
        <!-- 颜色偏好部分 -->
        <div class="form-section">
          <h3>颜色偏好</h3>
          <el-form-item label="主色调">
            <div class="color-selection">
              <div 
                v-for="color in mainColors" 
                :key="color.value" 
                class="color-box" 
                :class="{ 'selected': form.mainColor === color.value }"
                :style="{ backgroundColor: color.hex }"
                @click="selectMainColor(color.value)">
              </div>
            </div>
          </el-form-item>
          
          <el-form-item label="辅助色">
            <div class="color-selection">
              <div 
                v-for="color in accentColors" 
                :key="color.value" 
                class="color-box" 
                :class="{ 'selected': form.accentColor === color.value }"
                :style="{ backgroundColor: color.hex }"
                @click="selectAccentColor(color.value)">
              </div>
            </div>
          </el-form-item>
          
          <el-form-item label="颜色偏好">
            <el-select v-model="form.colorPreference" multiple placeholder="请选择颜色偏好">
              <el-option label="明亮色调" value="bright"></el-option>
              <el-option label="柔和色调" value="soft"></el-option>
              <el-option label="暗色调" value="dark"></el-option>
              <el-option label="对比强烈" value="contrast"></el-option>
              <el-option label="单色系" value="monochrome"></el-option>
              <el-option label="多彩色系" value="colorful"></el-option>
            </el-select>
          </el-form-item>
        </div>
        
        <!-- 特殊要求部分 -->
        <div class="form-section">
          <h3>特殊要求</h3>
          <el-form-item label="面料偏好">
            <el-select v-model="form.fabricPreference" multiple placeholder="请选择面料偏好">
              <el-option label="棉质" value="cotton"></el-option>
              <el-option label="丝质" value="silk"></el-option>
              <el-option label="毛呢" value="wool"></el-option>
              <el-option label="麻质" value="linen"></el-option>
              <el-option label="皮质" value="leather"></el-option>
              <el-option label="牛仔" value="denim"></el-option>
              <el-option label="羊绒" value="cashmere"></el-option>
            </el-select>
          </el-form-item>
          
          <el-form-item label="图案/印花">
            <el-select v-model="form.pattern" multiple placeholder="请选择图案/印花">
              <el-option label="纯色" value="solid"></el-option>
              <el-option label="条纹" value="stripes"></el-option>
              <el-option label="格子" value="plaid"></el-option>
              <el-option label="印花" value="floral"></el-option>
              <el-option label="波点" value="polkadot"></el-option>
              <el-option label="动物纹" value="animal"></el-option>
              <el-option label="几何图形" value="geometric"></el-option>
            </el-select>
          </el-form-item>
          
          <el-form-item label="个性需求">
            <el-input type="textarea" v-model="form.specialRequirements" placeholder="请输入您的特殊需求，如遮盖特定部位、凸显优点等"></el-input>
          </el-form-item>
        </div>
        
        <el-form-item>
          <el-button type="primary" :loading="loading" @click="submitForm">开始生成</el-button>
          <el-button @click="resetForm">重置</el-button>
        </el-form-item>
      </el-form>
    </el-card>
    
    <el-dialog title="试衣结果" :visible.sync="dialogVisible" width="80%">
      <div class="result-container">
        <div class="image-comparison">
          <div class="original-image">
            <h3>原始照片</h3>
            <img :src="originalImageUrl" alt="原始照片">
          </div>
          <div class="result-image">
            <h3>穿搭效果</h3>
            <img :src="resultImageUrl" alt="穿搭效果">
          </div>
        </div>
        <div class="result-actions">
          <el-button type="primary" @click="saveResult">保存结果</el-button>
          <el-button @click="dialogVisible = false">关闭</el-button>
        </div>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { mapState } from 'vuex'

export default {
  name: 'Home',
  data() {
    return {
      imageUrl: '',
      dialogVisible: false,
      originalImageUrl: '',
      resultImageUrl: '',
      imageFile: null,
      // 主色调选项
      mainColors: [
        { value: 'black', hex: '#000000', label: '黑色' },
        { value: 'white', hex: '#FFFFFF', label: '白色' },
        { value: 'gray', hex: '#808080', label: '灰色' },
        { value: 'red', hex: '#FF0000', label: '红色' },
        { value: 'blue', hex: '#0000FF', label: '蓝色' },
        { value: 'green', hex: '#008000', label: '绿色' },
        { value: 'yellow', hex: '#FFFF00', label: '黄色' },
        { value: 'purple', hex: '#800080', label: '紫色' },
        { value: 'pink', hex: '#FFC0CB', label: '粉色' },
        { value: 'brown', hex: '#A52A2A', label: '棕色' },
        { value: 'navy', hex: '#000080', label: '藏青色' },
        { value: 'beige', hex: '#F5F5DC', label: '米色' }
      ],
      // 辅助色选项（同主色调）
      accentColors: [
        { value: 'black', hex: '#000000', label: '黑色' },
        { value: 'white', hex: '#FFFFFF', label: '白色' },
        { value: 'gray', hex: '#808080', label: '灰色' },
        { value: 'red', hex: '#FF0000', label: '红色' },
        { value: 'blue', hex: '#0000FF', label: '蓝色' },
        { value: 'green', hex: '#008000', label: '绿色' },
        { value: 'yellow', hex: '#FFFF00', label: '黄色' },
        { value: 'purple', hex: '#800080', label: '紫色' },
        { value: 'pink', hex: '#FFC0CB', label: '粉色' },
        { value: 'brown', hex: '#A52A2A', label: '棕色' },
        { value: 'navy', hex: '#000080', label: '藏青色' },
        { value: 'beige', hex: '#F5F5DC', label: '米色' }
      ],
      // 衣服子类型选项
      clothingSubTypeOptions: [],
      // 衣服子类型映射
      clothingSubTypesMap: {
        top: [
          { value: 'tshirt', label: 'T恤' },
          { value: 'shirt', label: '衬衫' },
          { value: 'blouse', label: '女式衬衫' },
          { value: 'polo', label: 'Polo衫' },
          { value: 'sweater', label: '毛衣' },
          { value: 'hoodie', label: '连帽衫' },
          { value: 'tank', label: '背心' }
        ],
        outerwear: [
          { value: 'jacket', label: '夹克' },
          { value: 'coat', label: '大衣' },
          { value: 'blazer', label: '西装外套' },
          { value: 'cardigan', label: '开衫' },
          { value: 'windbreaker', label: '风衣' },
          { value: 'down', label: '羽绒服' },
          { value: 'leather', label: '皮衣' }
        ],
        pants: [
          { value: 'jeans', label: '牛仔裤' },
          { value: 'chinos', label: '休闲裤' },
          { value: 'trousers', label: '西裤' },
          { value: 'sweatpants', label: '运动裤' },
          { value: 'shorts', label: '短裤' },
          { value: 'leggings', label: '紧身裤' }
        ],
        skirt: [
          { value: 'mini', label: '迷你裙' },
          { value: 'midi', label: '中长裙' },
          { value: 'maxi', label: '长裙' },
          { value: 'pleated', label: '百褶裙' },
          { value: 'pencil', label: '铅笔裙' },
          { value: 'aline', label: 'A字裙' }
        ],
        dress: [
          { value: 'casual', label: '休闲连衣裙' },
          { value: 'formal', label: '正式连衣裙' },
          { value: 'evening', label: '晚礼服' },
          { value: 'summer', label: '夏季连衣裙' },
          { value: 'shirt_dress', label: '衬衫裙' },
          { value: 'bodycon', label: '紧身连衣裙' }
        ],
        suit: [
          { value: 'business', label: '商务套装' },
          { value: 'casual', label: '休闲套装' },
          { value: 'formal', label: '正装' },
          { value: 'sport', label: '运动套装' }
        ]
      },
      form: {
        gender: '男',
        ageGroup: '26-35',
        height: 170,
        bodyType: 'standard',
        skinTone: 'natural',
        
        occasion: 'casual',
        season: 'spring',
        clothingType: 'top',
        clothingSubType: 'tshirt',
        style: 'casual',
        
        mainColor: 'blue',
        accentColor: 'white',
        colorPreference: [],
        
        fabricPreference: [],
        pattern: ['solid'],
        specialRequirements: ''
      }
    }
  },
  computed: {
    ...mapState({
      loading: state => state.loading
    })
  },
  created() {
    // 初始化衣服子类型选项
    this.updateClothingSubTypes();
  },
  methods: {
    handleImageChange(file) {
      this.imageFile = file.raw
      this.imageUrl = URL.createObjectURL(file.raw)
    },
    beforeUpload(file) {
      const isImage = file.type.startsWith('image/')
      const isLt5M = file.size / 1024 / 1024 < 5

      if (!isImage) {
        this.$message.error('只能上传图片文件!')
      }
      if (!isLt5M) {
        this.$message.error('图片大小不能超过 5MB!')
      }
      return isImage && isLt5M
    },
    // 更新衣服子类型选项
    updateClothingSubTypes() {
      if (this.form.clothingType && this.clothingSubTypesMap[this.form.clothingType]) {
        this.clothingSubTypeOptions = this.clothingSubTypesMap[this.form.clothingType];
        // 设置默认值为第一个选项
        if (this.clothingSubTypeOptions.length > 0) {
          this.form.clothingSubType = this.clothingSubTypeOptions[0].value;
        }
      } else {
        this.clothingSubTypeOptions = [];
        this.form.clothingSubType = '';
      }
    },
    // 选择主色调
    selectMainColor(color) {
      this.form.mainColor = color;
    },
    // 选择辅助色
    selectAccentColor(color) {
      this.form.accentColor = color;
    },
    async submitForm() {
      if (!this.imageFile) {
        this.$message.error('请上传照片')
        return
      }
      
      try {
        const result = await this.$store.dispatch('uploadImage', {
          image: this.imageFile,
          params: this.form
        })
        
        if (result.success) {
          // 使用服务器返回的图片路径
          const baseURL = 'http://localhost:5000'
          this.originalImageUrl = baseURL + result.original_image
          this.resultImageUrl = baseURL + result.result_image
          this.dialogVisible = true
          this.$message.success('穿搭生成成功')
        }
      } catch (error) {
        this.$message.error('处理失败: ' + error.message)
      }
    },
    resetForm() {
      this.form = {
        gender: '男',
        ageGroup: '26-35',
        height: 170,
        bodyType: 'standard',
        skinTone: 'natural',
        
        occasion: 'casual',
        season: 'spring',
        clothingType: 'top',
        clothingSubType: 'tshirt',
        style: 'casual',
        
        mainColor: 'blue',
        accentColor: 'white',
        colorPreference: [],
        
        fabricPreference: [],
        pattern: ['solid'],
        specialRequirements: ''
      }
      this.imageUrl = ''
      this.imageFile = null
      // 重新初始化衣服子类型
      this.updateClothingSubTypes();
    },
    saveResult() {
      this.$message.success('结果已保存')
      this.dialogVisible = false
    }
  }
}
</script>

<style scoped>
.home {
  max-width: 1000px;
  margin: 0 auto;
}

.upload-card {
  margin-bottom: 20px;
}

.form-section {
  margin-bottom: 20px;
  padding: 15px;
  background-color: #f9f9f9;
  border-radius: 8px;
}

.form-section h3 {
  margin-top: 0;
  margin-bottom: 15px;
  padding-bottom: 8px;
  border-bottom: 1px solid #ebeef5;
  color: #409EFF;
}

.image-uploader {
  display: flex;
  justify-content: center;
  margin-bottom: 20px;
}

.upload-icon {
  font-size: 28px;
  color: #8c939d;
  width: 300px;
  height: 400px;
  line-height: 400px;
  text-align: center;
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
}

.preview-image {
  width: 300px;
  height: 400px;
  object-fit: cover;
  border-radius: 6px;
}

.upload-tip {
  color: #909399;
  font-size: 12px;
  margin-top: 5px;
}

.color-selection {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.color-box {
  width: 32px;
  height: 32px;
  border-radius: 4px;
  cursor: pointer;
  border: 2px solid transparent;
  transition: all 0.2s;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.color-box:hover {
  transform: scale(1.1);
}

.color-box.selected {
  border: 2px solid #409EFF;
  transform: scale(1.1);
}

.result-container {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.image-comparison {
  display: flex;
  justify-content: space-around;
  width: 100%;
  margin-bottom: 20px;
}

.original-image,
.result-image {
  text-align: center;
}

.original-image img,
.result-image img {
  width: 300px;
  height: 400px;
  object-fit: cover;
  border-radius: 6px;
}

.result-actions {
  margin-top: 20px;
}
</style> 